<template>
	<el-pagination
	  @current-change="handleCurrentChange"
	  :current-page="current"
	  :page-size="size"
	  layout="total,prev, pager, next,jumper,sizes"
	  :page-sizes="[10, 20, 30, 40, 50]"
	  background
	  :pager-count="5"
	  :total="total"
	  @size-change="handleSizeChange"
	>
	</el-pagination>
  </template>
   
  <script>
  export default {
	name: "EPagenation",
	props: {
	  total: {
		default: 0,
		type: Number,
	  },
	},
	data() {
	  return {
		size: 10,
		current: 1,
	  };
	},
	methods: {
	  init() {
		this.current = 1;
		this.size = 10;
	  },
	  handleCurrentChange(val) {
		this.current = val;
		this.$emit("currentPageClick", { nCurrent: val, nSize: this.size });
	  },
	  handleSizeChange(val) {
		this.size = val;
		this.current = 1;
		this.$emit("currentPageClick", { nCurrent: this.current, nSize: val });
	  },
	},
  };
  </script>
   
  <style lang="scss" scoped>
  $color1: #0e90fe;
  $color2: rgba(243, 243, 243, 1);
  $color3: #fff;
  $color4: rgb(244, 244, 244);
  $color5: rgba(220, 220, 220, 1);
  $color6: #303133;
  $radius: 4px;
  $color-size: 14px;
  .sp-pagination {
	::v-deep .btn-prev,
	::v-deep .btn-next {
	  border: 1px solid $color5 !important;
	  background: center center no-repeat $color4 !important;
	  padding-left: 0;
	  padding-right: 0;
	  padding: 0 8px;
	  border-radius: $radius;
	  font-size: $color-size;
	}
	::v-deep .btn-prev:hover,
	::v-deep .btn-next:hover {
	  color: $color1;
	}
	::v-deep .el-pagination__total {
	  margin: 0 10px;
	  color: $color6;
	  font-size: $color-size;
	}
	::v-deep .el-pagination__jump {
	  margin: 0;
	  color: $color6;
	  font-size: $color-size;
	}
	::v-deep .el-pager {
	  .number {
		border: 1px solid $color5;
		border-radius: $radius;
		margin: 0 5px;
	  }
	  .number:hover {
		border: 1px solid $color5;
		color: $color1;
	  }
	  .active {
		background-color: $color1;
		border: 1px solid $color5;
		color: $color3;
		pointer-events: none;
	  }
	}
  }
  </style>